typescript的学习
新的项目将要使用typescript,所以我要提前学习一些知识。下面是我学到的一些前期的理论知识。
一、什么是typeScript
拥有类型系统的JavaScript的超级,可以编辑成纯JavaScript,像是一个工具。
类型检查:会在编译代码时进行严格的静态类型检查,编码是发现存在的隐患
语言扩展:会包括es6和未来提案中的特性,接口抽象类型
工具属性:可以编译成标准的JavaScript,可以在任何浏览器操作系统上运行
好处:提高开发效率,降低维护成本,重塑类型思维
二、语言类型
1、原始类型
let bool: boolean = true
let num: number = 123
let str: string = 'abc'
str = 123 ❌ //不能将类型“123”分配给类型“string”
num = 'hello' //不能将类型“"hello"”分配给类型“number”。
2、数组
//TypeScript像JavaScript一样可以操作数组元素。 有两种方式可以定义数组。 第一种,可以在元素类型后面接上 [],表示由此类型元素组成的一个数组:
let arr1: number[] = [1,2,3]
let arr2: Array<number> = [1,2,3]
let list:string[] = ['cc','dd','ff']
console.log(list)
//想要number和string类型的数组
let arr3: Array<number | string> = [1,2,3,'4']
3、元组
//元组类型允许表示一个已知元素数量和类型的数组,各元素的类型不必相同。 比如,你可以定义一对值分别为 string和number类型的元组。(特殊的数组,限定的数组元素的类型和个数)
let tuple: [number, string] = [0,'1']
let tuple1: [number, string] = [0, '1', 9] ❌ //不能将类型“[number, string,number]”分配给类型“[number, string]”。属性“length”的类型不兼容。不能将类型“3”分配给类型“2”
//ts允许往元组添加新元素,但是不能访问
tuple.push(2); console.log(tuple) // [0, "1", 2]
tuple[2] ❌ // Tuple type '[number, string]' of length '2' has no element at index '2'
4、枚举
enum类型是对JavaScript标准数据类型的一个补充。 像C#等其它语言一样,使用枚举类型可以为一组数值赋予友好的名字。
enum Color {Red, Green, Blue}
let c: Color = Color.Green;
// 默认情况下,从0开始为元素编号。 你也可以手动的指定成员的数值。 例如,我们将上面的例子改成从 1开始编号:
enum Color {Red = 1, Green, Blue}
let c: Color = Color.Green;
或者,全部都采用手动赋值:
enum Color {Red = 1, Green = 2, Blue = 4}
let c: Color = Color.Green;
// 枚举类型提供的一个便利是你可以由枚举的值得到它的名字。 例如,我们知道数值为2,但是不确定它映射到Color里的哪个名字,我们可以查找相应的名字:
enum Color {Red = 1, Green, Blue}
let colorName: string = Color[2];
console.log(colorName); // 显示'Green'因为上面代码里它的值是2
5、any
//有时候,我们会想要为那些在编程阶段还不清楚类型的变量指定一个类型。 这些值可能来自于动态的内容,比如来自用户输入或第三方代码库。 这种情况下,我们不希望类型检查器对这些值进行检查而是直接让它们通过编译阶段的检查。 那么我们可以使用 any类型来标记这些变量:
let notSure: any = 4;
notSure = "maybe a string instead";
notSure = false; // okay, definitely a boolean
//在对现有代码进行改写的时候,any类型是十分有用的,它允许你在编译时可选择地包含或移除类型检查。 你可能认为 Object有相似的作用,就像它在其它语言中那样。 但是 Object类型的变量只是允许你给它赋任意值 - 但是却不能够在它上面调用任意的方法,即便它真的有这些方法:
let notSure: any = 4;
notSure.ifItExists(); // okay, ifItExists might exist at runtime
notSure.toFixed(); // okay, toFixed exists (but the compiler doesn't check)
let prettySure: Object = 4;
prettySure.toFixed(); // Error: Property 'toFixed' doesn't exist on type 'Object'.
//当你只知道一部分数据的类型时,any类型也是有用的。 比如,你有一个数组,它包含了不同的类型的数据:
let list: any[] = [1, true, "free"];
list[1] = 100;
6、函数
//函数
let add = (x, y) => x + y //参数“x”,“y”隐式具有“any”类型。
let addNumber = (x: number, y: number): number => x + y //括号后添加的类型为函数返回值的类型,通常返回值类型可以省略,ts会推断
//定义函数类型并且实现
let compute: (x: numbwe, y: number) => number; compute = (a, b) => a + b
function player(age:number,height:number,name:string):string{
return '找到年龄'+age+'的运动员,身高'+height+',名字是'+name
}
var age:number = 18;
var height:number = 180;
var name:string = 'haha';
var result:string = player(19,178,'小米')
console.log(result)
- 现在暂时就这么点,一边学一边做笔记。