typescipt学习笔记-常见类型
学习文档：
TypeScript 之 Class（上） (yuque.com)
某个人博客 - 基础类型_TypeScript中文文档
基础类型 - TypeScript 中文手册
TypeScript 基础类型 | 菜鸟教程 (runoob.com)
一、前言
1、ts的作用：静态类型检查、非异常失败、类型工具（提供补全和错误信息）。
2、tsc: the TypeScript compiler .TypeScript编译器.
ts文件不会被直接运行，需要通过tsc编译成js文件，才能运行。编译命令：tsc xxx.ts。通过这个命令 xxx.ts 就会被编译出一个xxx.js 文件出来。
① 就算编译中类型检查报错了，是依旧会编译出结果。想要使用严格模式，可以执行命令
tsc --noEmitOnError hello.ts
②如果类型系统可以正确判断出来类型，不需要加类型注解。
let msg = 'hello there';
// don't need -- let msg:string
3、编译之后的js，会被 类型抹除（不再有类型注解）+降级（es6可能被降为->es3）
4、严格模式noImplicitAny(当类型被隐士推断为null时，报错) 、strictNullChecks(需要明确处理null和undefined)
三、符号专题
0、属性 ： 类型 【类型注解】
1、属性后面加？，表示属性是可选的 function quicktest(name?:string)【可选属性】
2、多个类型用 | 分割，表示该属性可有多个类型 function quicktest(name:string | number) 【联合类型】
3、将一个值用 type name = xxx替代，表示用name替代这个值。【类型别名】
type name = {firstname:string} function quicktest(name:name)
4、将一个值用 interface namet xxx替代.【接口】//除了obj之外类型可以用吗？
interface name {firstname:string}
5、类型 as 更具体类型 ，把类型更具体。【类型断言】
const dom1 = document.getElementById('canvas') as HTMLCanvasElement
6、在某个值后面加 ! 表示明确知道某个值不是null或者undefined时
function quicktest (name: string | null){console.log(name!.toUppercase())}
二、常见类型 - 文档笔记
1、string /number/boolean/array/any
2、变量上的类型注解 let myName:string = "Alice"; 这里类型注解不是必须的，因为ts会自动推断
如果你刚开始使用，尝试尽可能少的使用类型注解。你也许会惊讶于，TypeScript 仅仅需要很少的内容就可以完全理解将要发生的事情。
3、函数：
① 参数类型注解:跟在参数名字后面
function greet(name: string) {
console.log("Hello, " + name.toUpperCase() + "!!");
}②返回值类型注解:跟在参数列表后面
function getFavoriteNumber(): number {
return 26;
}③匿名函数参数通过上下文推断推断出s类型，会自动指定类型
4、对象类型
①列出属性和对应的类型
②可选属性:在属性后面添加一个?
function printName(obj: { first: string; last?: string }) {
// ...
}5、联合类型
①类型用 | 分割?
②使用时，需要用代码收窄联合类型。但如果联合类型每个成员都可应用代码则不用收窄。
function printId(id: number | string) {
if (typeof id === "string") {
// In this branch, id is of type 'string'
console.log(id.toUpperCase());
} else {
// Here, id is of type 'number'
console.log(id);
}
}6、类型别名
像赋值变量一样，将复杂或简单类型用另一个名字替代
type Point = {
x: number;
y: number;
};
// Exactly the same as the earlier example
function printCoord(pt: Point) {
// ...
}7、 接口
命名对象类型的另一种方式
interface Point {
x: number;
y: number;
}
function printCoord(pt: Point) {
//---
} 类型别名和接口不同：接口可易扩展，类型别名不可扩展。
// Interface
// 通过继承扩展类型
interface Animal {
name: string
}
interface Bear extends Animal {
honey: boolean
}
const bear = getBear()
bear.name
bear.honey
// Type
// 通过交集扩展类型
type Animal = {
name: string
}
type Bear = Animal & {
honey: boolean
}
const bear = getBear();
bear.name;
bear.honey;
// Interface
// 对一个已经存在的接口添加新的字段
interface Window {
title: string
}
interface Window {
ts: TypeScriptAPI
}
const src = 'const a = "Hello World"';
window.ts.transpileModule(src, {});
// Type
// 创建后不能被改变
type Window = {
title: string
}
type Window = {
ts: TypeScriptAPI
}
// Error: Duplicate identifier 'Window'.
8、类型断言
将类型指定为更加具体的类型
const myCanvas = document.getElementById("main_canvas") as HTMLCanvasElement;
9、字面量类型
除了常见的string/number等类型，也可以将类型声明为一个值。常用于函数只能传入一些固定的值时。
function testFunc(name:string,gender:'male'|'female',department:'techDepart'|'manuDepart'){
//---
}
testFunc('小米','female','techDepart')
testFunc('小花','female','operDep') //'operDep'不在可选项 报错
①字面量推断
定义的时候给了一个字面量，使用的时候这个值来自于一个对象，就会报错
declare function handleRequest(url: string, method: "GET" | "POST"): void;
const req = { url: "https://example.com", method: "GET" };
handleRequest(req.url, req.method);
// Argument of type 'string' is not assignable to parameter of type '"GET" | "POST"'.
因为在使用req.method时，它的值'GET'会被认定为string类型。这和我们第一行声明的字面量"GET"|"POST"不同
处理方法：
方法一：添加类型断言
方法二：使用as const将整个对象转为类型字面量。对象被转为类型字面量时，默认对象中每一个属性的值都是字面量类型，而不是string/number等通用类型。
declare function handleRequest(url: string, method: "GET" | "POST"): void;
// 方法一：添加类型断言
const req = { url: "https://example.com", method: "GET" as "GET"};
// 将对象转为类型字面量
const req = { url: "https://example.com", method: "GET" } as const;
handleRequest(req.url, req.method);
10、null 或 undefined
11、非空断言 !。明确知道某个值不为null或undefined时,在其后面使用感叹号!
function liveDangerously(x?: number | null) {
// No error
console.log(x!.toFixed());
}