TypeScript核心语法(2)——基本用法
类型声明
TypeScript 代码最明显的特征,就是为 JavaScript 变量加上了类型声明。
typescript
let foo: string;
上面示例中,变量foo
的后面使用冒号,声明了它的类型为string
。
类型声明的写法,一律为在标识符后面添加“冒号 + 类型”。函数参数和返回值,也是这样来声明类型。
function toString(num: number): string {
return String(num);
}
上面示例中,函数toString()
的参数num
的类型是number
。参数列表的圆括号后面,声明了返回值的类型是string
。
注意,变量的值应该与声明的类型一致,如果不一致,TypeScript 就会报错。
// 报错
let foo: string = 123;
上面示例中,变量foo
的类型是字符串,但是赋值为数值123
,TypeScript 就报错了。
另外,TypeScript 规定,变量只有赋值后才能使用,否则就会报错。
let x: number;
console.log(x); // 报错
上面示例中,变量x
没有赋值就被读取,导致报错。而 JavaScript 允许这种行为,不会报错,没有赋值的变量会返回undefined
。
类型推断
类型声明并不是必需的,如果没有,TypeScript 会自己推断类型。
let foo = 123;
上面示例中,变量foo
并没有类型声明,TypeScript 就会推断它的类型。由于它被赋值为一个数值,因此 TypeScript 推断它的类型为number
。
后面,如果变量foo
更改为其他类型的值,跟推断的类型不一致,TypeScript 就会报错。
let foo = 123;
foo = "hello"; // 报错
上面示例中,变量foo
的类型推断为number
,后面赋值为字符串,TypeScript 就报错了。
TypeScript 也可以推断函数的返回值。
function toString(num: number) {
return String(num);
}
上面示例中,函数toString()
没有声明返回值的类型,但是 TypeScript 推断返回的是字符串。正是因为 TypeScript 的类型推断,所以函数返回值的类型通常是省略不写的。
从这里可以看到,TypeScript 的设计思想是,类型声明是可选的,你可以加,也可以不加。即使不加类型声明,依然是有效的 TypeScript 代码,只是这时不能保证 TypeScript 会正确推断出类型。
值与类型
学习 TypeScript 需要分清楚“值”(value)和“类型”(type)。
每一个值在 TypeScript 里面都是有类型的。比如,3
是一个值,它的类型是number
。
TypeScript 代码只涉及类型,不涉及值。所有跟“值”相关的处理,都由 JavaScript 完成。
这一点务必牢记。TypeScript 项目里面,其实存在两种代码,一种是底层的“值代码”,另一种是上层的“类型代码”。前者使用 JavaScript 语法,后者使用 TypeScript 的类型语法。
它们是可以分离的,TypeScript 的编译过程,实际上就是把“类型代码”全部拿掉,只保留“值代码”。
编写 TypeScript 项目时,不要混淆哪些是值代码,哪些是类型代码。