Ts 学习 01----------懵懂少年初涉TS

271 阅读5分钟

ts简介

typescript是微软开发的一门编程语言,它是javascrip的一个超集,它遵循最新的es6脚本语言规范,typescript扩展了javascript的语法,任何已经存在的javascipt程序可以不经任何改动的在typescript环境下运行

typescript只是向javascript添加了一些新的遵循es6规范的语法 以及 基于类的面向对象编程的特性。

ts的安装及编译

typescript中文网:www.tslang.cn/docs/home.h…

全局安装:npm install -g typescript 

编译:tsc xxx.ts 这种方式编译时会生成一个js文件

// greeter.ts
function greeter(person) {
    return "Hello, " + person;
}

let user = "Jane User";

document.body.innerHTML = greeter(user);



然后运行tsc greeter.ts 会生成一个js文件 greeter.js

// greeter.ts
function greeter(person: string) {    return "Hello, " + person;
}

let user = "Jane User";

document.body.innerHTML = greeter(user);

其实初看这两个文件并没有什么不同,是因为我们在ts文件中,使用的js的语法,并没有加上类型注解

       如果嫌这种方式比较繁琐的话(每次都要运行js文件来看结果),我们可以使用ts-node包来进行简化编译ts文件 

安装ts-node:npm install -g ts-node 

在终端或者命令行使用 ts-node greeter.ts 即可得出ts文件的编译结果,不会再重新生成js文件

这里我们放上ts-node的地址:www.npmjs.com/package/ts-…

基础数据类型

为了让程序有价值,我们需要能够处理最简单的数据单元:数字,字符串,结构体,布尔值等。 TypeScript支持与JavaScript几乎相同的数据类型,此外还提供了实用的枚举类型方便我们使用。

原始数据类型包括:布尔值、数值、字符串、nullundefined 以及 ES6 中的新类型 SymbolBigInt

这里主要介绍前五种原始数据类型在 TypeScript 中的应用

//boolean
let isDone: boolean = false;
let hasDone: boolean = true;

//number 同js一样支持八进制和十六进制
let decLiteral: number = 6;
let hexLiteral: number = 0xf00d;
let binaryLiteral: number = 0b1010;
let octalLiteral: number = 0o744;

// string 
let name: string = "bob";
name = "smith";
let name: string = `Gene`;
let age: number = 37;
let sentence: string = `Hello, my name is ${ name }.
I'll be ${ age + 1 } years old next month.`;

//Null 和 Undefined
//默认情况下null和undefined是所有类型的子类型。 就是说你可以把 null和undefined赋值给number类型的变量
let u: undefined = undefined;
let n: null = null;
let a:number =null | undefined

// 空值
//JavaScript 没有空值(Void)的概念,在 TypeScript 中,可以用 void 表示没有任何返回值的函数:
function alertName(): void {
    alert('My name is Tom');
}

对象类型及其余类型汇总

// 数组
// 第一种,可以在元素类型后面接上 [],表示由此类型元素组成的一个数组:
let list: number[] = [1, 2, 3];
let list: (number| string)[] = [1, 2, 3,'str'];
//第二种方式是使用数组泛型,Array<元素类型>:
let list: Array<number> = [1, 2, 3];

// 元组 Tuple
//元组类型允许表示一个已知元素数量和类型的数组,各元素的类型不必相同。 比如,你可以定义一对值分别为 string和number类型的元组。
// Declare a tuple type
let x: [string, number]= ['hello', 10];
// Initialize it
x = ['hello', 10]; // OK
// Initialize it incorrectly
x = [10, 'hello']; // Error
//当添加越界的元素时,它的类型会被限制为元组中每个类型的联合类型:
let tom: [string, number];
tom = ['Tom', 25]; //初始化时只能是相对应的2个 不能超过范围,也不能少
tom.push('male'); //[ 'Tom', 25, 'male' ]
tom.push(true);//Error: Argument of type 'true' is not assignable to parameter of type 'string | number'.


// 枚举:enum类型是对JavaScript标准数据类型的一个补充.像C#等其它语言一样,使用枚举类型可以为一组数值赋予友好的名字enum Color {Red, Green, Blue}
let c: Color = Color.Green; //1 默认从索引0开始

enum Color {Red = 1, Green, Blue}
let c: Color = Color.Green;//2 手动的指定成员的数值 索引自后递增

enum Color {Red = 1, Green, Blue}
let colorName: string = Color[2];
console.log(colorName);//Green  显示'Green'因为上面代码里它的值是2


// any
有时候,我们会想要为那些在编程阶段还不清楚类型的变量指定一个类型。 
这些值可能来自于动态的内容,比如来自用户输入或第三方代码库。 
这种情况下,我们不希望类型检查器对这些值进行检查而是直接让它们通过编译阶段的检查。 
那么我们可以使用 any类型来标记这些变量
如果是一个普通类型,在赋值过程中改变类型是不被允许的,但是any可以
let notSure: any = 4;
notSure = "maybe a string instead";
notSure = false; // okay, definitely a boolean
你可能认为 Object有相似的作用,就像它在其它语言中那样。 
但是 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;

//对象和函数对象类型
const teacher: { name: string, age: number } = { name: 'dell', age: 18 };
console.log('obj:', teacher);

// 函数1  number是函数的返回值类型
const getTotal: () => number = () => {
    return 123;
};
const getTotal = (person:Person):string =>{
    return person.a;
};
// 函数2  number是函数的返回值
const getTotal(a:number,b:number):number {
    return a+b;
};
getTotal(10,20)
// void 函数没有返回值
const sayHello():void{
   console.log('hello')
};

//函数的参数解构写法function add({first,second}:{first:number,second:number}):number{
    return first + second
}
const total = add({first:10,second:20})