TypeScript笔记①—学前准备与变量

学前准备

安装

使用Node.js安装：npm install typescript -g

使用IDE：VsCode

下载地址：Visual Studio Code - Code Editing. Redefined

安装扩展：TypeScript Extension Pack

编译调试ts文件

TS文件编译为JS文件，TS文件并不能直接在Web中运行

1. 编译TS文件命令：tsc 文件名

例如：hello.ts文件在执行完tsc hello.ts后得到

实时监控TS文件编译为JS文件：tsc 文件名 -w

2. 调试

   • 使用node hello.js在vscode控制台可以看到输出

   // hello.js
   console.log("Hello World");
   

• 使用html中引入js文件在浏览器控制台中得到输出

<script src="./hello.js"></script>

3. ts配置文件tsconfig

创建文件树

• dist文件夹用来输出src中源代码编译文件
• src文件夹用来存放原代码
• 根目录下的tsconfig.json用来设置ts文件的配置

tsconfig.json内容：

{
	// ** 表示任意目录 * 表示任意文件
	"include": ["./src/**/*"],
	// 不需要编译的选项
	"exclude": [],
	// 编译器可选选项
	"compilerOptions": {
		// 设置编译ts被编译为ES6版本, 默认为ES3
		"target": "ES6",
		// module模块化使用的版本
		"module": "ES6",
		// outDir 指定编译后文件所在目录
		"outDir": "./dist",
		// outFile 将代码合并为一个文件 (如需使用，module需要设置为system或amd)
		// "outFile": "./dist/index.js"
		// 是否对JS文件进行编译
		"allowJs": true,
		// 是否检查js代码是否符合规范
		"checkJs": false,
		// 是否移除注释
		"removeComments": true,
		// 不生成编译后文件
		"noEmit": false,
		// 当有错误时不生成编译文件
		"noEmitOnError": true,
		// 将编译后的文件为严格模式
		"alwaysStrict": true,
		// 是否严格检查
		"strict": true
	}
}

TypeScript基础语法

TypeScript是JavaScript的超集，所以TypeScript可以兼容JavaScript的数据类型

变量

基本类型

类型	例子	描述
number	1, -33, 2.5	任意数字
string	‘hi’, “hi”, `hi`	任意字符串
boolean	true、false	布尔值true或false
any	*	任意类型
unknown	*	类型安全的any
void	空值（undefined）	没有值（或undefined）
never	没有值	不能是任何值
object	{name:'孙悟空'}	任意的JS对象
array	[1,2,3]	任意JS数组
tuple	[4,5]	元素，TS新增类型，固定长度数组
enum	enum{A, B}	枚举，TS中新增类型

类型声明

声明变量类型

let a: number;

let b: number = 10;

let c: string = 'string';

声明函数类型

// 都不指定->js写法 (严格模式下会报错->隐式使用any类型)
function add(a, b) {
    return a + b;
}

// 只指定参数类型
function add(a: number, b: number) {
    // 返回数值类型
    return a + b;
    // 也返回字符串 return "a" + "b"; 结果为"ab"
}
// 指定参数与返回值类型
function add(a: number, b: number): number {
    return a + b;
}

格式化字符串

• 字符串中填入数值：

let name: string = 'yxc', age: number = 18;
let s: string = `My name is ${name}, I'm ${age / 2} years old.`;

• 定义多行字符串：

let s: string = 
`<div>
    <h2>标题</h2>
    <p>段落</p>
/div>`

• 保留两位小数如何输出

let x: number = 1.234567;
let s: string = `${x.toFixed(2)}`;

---

let与const

用来声明变量，作用范围为当前作用域。

• let用来定义变量；
• const用来定义常量；

例如：

let s = "Hello World", x = 5;
console.log(s + " " + x);
// Hello World 5

let d = {
    name: "xiao ming",
    age: 18,
}
console.log(d);
// { name: 'xiao ming', age: 18 }

const n = 100;
console.log(n);
// 100

类型断言

• 有些情况下，变量的类型对于我们来说是很明确，但是TS编译器却并不清楚，此时，可以通过类型断言来告诉编译器变量的类型，断言有两种形式：

  • 第一种

     let someValue: unknown = "this is a string";
     let strLength: number = (someValue as string).length;
    

  • 第二种

      let someValue: unknown = "this is a string";
      let strLength: number = (<string>someValue).length;