一、磨刀不误砍柴工
- 先下载typescript
npm install -g typescript
-
查看下载成功没
tsc -v
查看版本
-
编译
tsc XXX.ts
- 按照上面方式每编写一个ts文件就要手动去编译一下太麻烦了，下面来简单配置一下编译文件，实现自动编译。详细配置传送门=>官网详细配置
{
"compilerOptions":{
"outDir": "./dist", //输入目录
"target": "ES2015", //编译es5
"watch": true , // 监听
"strictNullChecks":true //严格控制检查null和undefined
},
"include": ["./src/**/*"] //指定要编译的目录
}
文件目录
二、基础类型
1）布尔值：
最基本的数据类型就是简单的true/false值，在JavaScript和TypeScript里叫做boolean（其它语言中也一样）。
let isDone: boolean = false;
2）数字：
和JavaScript一样，TypeScript里的所有数字都是浮点数。 这些浮点数的类型是 number。 除了支持十进制和十六进制字面量，TypeScript还支持ECMAScript 2015中引入的二进制和八进制字面量。
let decLiteral: number = 6;
let hexLiteral: number = 0xf00d;
let binaryLiteral: number = 0b1010;
let octalLiteral: number = 0o744;
3）字符串：
JavaScript程序的另一项基本操作是处理网页或服务器端的文本数据。 像其它语言里一样，我们使用 string表示文本数据类型。 和JavaScript一样，可以使用双引号（ "）或单引号（'）表示字符串。
let name: string = "bob";
name = "smith";
还可以使用模版字符串，它可以定义多行文本和内嵌表达式。 这种字符串是被反引号包围（ `），并且以${ expr }这种形式嵌入表达式
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.`;
4）数组：
TypeScript像JavaScript一样可以操作数组元素。 有两种方式可以定义数组。
第一种，可以在元素类型后面接上 []，表示由此类型元素组成的一个数组：
let list: number[] = [1, 2, 3];
第二种方式是使用数组泛型，Array<元素类型>：
let list: Array<number> = [1, 2, 3];
如果数组中有多种类型，比如既有数字类型，又有字符串的时候。那我们要如何定义那。 很简单，只要加个()，然后在里边加上|就可以了，具体看代码。
let arr: ( number| string )[] = [1,'string',2]
5）元组 Tuple：
元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同。 比如，你可以定义一对值分别为 string和number类型的元组。
// Declare a tuple type
let x: [string, number];
// Initialize it
x = ['hello', 10]; // OK
// Initialize it incorrectly
x = [10, 'hello']; // Error
当访问一个已知索引的元素，会得到正确的类型：
console.log(x[0].substr(1)); // OK
console.log(x[1].substr(1)); // Error, 'number' does not have 'substr'
当访问一个越界的元素，会使用联合类型替代：
x[3] = 'world'; // OK, 字符串可以赋值给(string | number)类型
console.log(x[5].toString()); // OK, 'string' 和 'number' 都有 toString
x[6] = true; // Error, 布尔不是(string | number)类型
6）枚举：
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
7）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;
8）Void：
某种程度上来说，void类型像是与any类型相反，它表示没有任何类型。 当一个函数没有返回值时，你通常会见到其返回值类型是 void：
function warnUser(): void {
console.log("This is my warning message");
}
声明一个void类型的变量没有什么大用，因为你只能为它赋予undefined和null：
let unusable: void = undefined;
9）Null 和 Undefined：
TypeScript里，undefined和null两者各自有自己的类型分别叫做undefined和null。 和 void相似，它们的本身的类型用处不是很大：
// Not much else we can assign to these variables!
let u: undefined = undefined;
let n: null = null;
默认情况下
null和undefined是所有类型的子类型。 就是说你可以把null和undefined赋值给number类型的变量。
然而，当你指定了--strictNullChecks标记，null和undefined只能赋值给void和它们各自。 这能避免很多常见的问题。 也许在某处你想传入一个string或null或undefined，你可以使用联合类型string | null | undefined。
8）Never：
never类型表示的是那些永不存在的值的类型。 例如， never类型是那些总是会抛出异常或根本就不会有返回值的函数表达式或箭头函数表达式的返回值类型； 变量也可能是 never类型，当它们被永不为真的类型保护所约束时。
never类型是任何类型的子类型，也可以赋值给任何类型；然而，没有类型是never的子类型或可以赋值给never类型（除了never本身之外）。 即使 any也不可以赋值给never。
下面是一些返回never类型的函数：
// 返回never的函数必须存在无法达到的终点
function error(message: string): never {
throw new Error(message);
}
// 推断的返回值类型为never
function fail() {
return error("Something failed");
}
// 返回never的函数必须存在无法达到的终点
function infiniteLoop(): never {
while (true) {
}
}
10）Object：
object表示非原始类型，也就是除number，string，boolean，symbol，null或undefined之外的类型。
使用object类型，就可以更好的表示像Object.create这样的API。例如：
declare function create(o: object | null): void;
create({ prop: 0 }); // OK
create(null); // OK
create(42); // Error
create("string"); // Error
create(false); // Error
create(undefined); // Error
三、函数参数和返回类型
- 函数简单定义类型
如果指定传入的参数是number类型，返回的是number类型，那么就必须按照这个要求来
function add(x: number, y: number): number {
return x + y;
}
- 函数无返回值类型
函数没有任何返回值，加上类型注解void，这样后续只要有返回，就会报错提示
function conso(x:string,y:string):void{
console.log(x+y)
}
- 函数never返回值类型
如果一个函数永远执行不完，可以never标注
function conso(x:string,y:string):never{
throw new Error()
console.log("执行不到")
}
conso('1','2')
四、interface接口
正常定义函数的参数的时候，按照下面的参数注解方式直接定义了
// 先是按照正常的逻辑来定义个学生的信息
let Student = (name:string,age:number,score:number)=>{
return `姓名：${name},年龄：${age},成绩：${score}`
}
console.log(Student("鲁班",18,99)) //姓名：鲁班,年龄：18,成绩：99
但是如果这个时候再写一个函数新增加一个参数，又要将上面的代码重写一遍，这个时候可以考虑采用接口，先定义参数和类型，然后参数的注解直接用接口就好。
// 定义接口
interface Info{
name:string;
age: number;
score: number;
height?:number //?意思是非必选
}
let Student = (studentInfo:Info)=>{
let res:any
if(studentInfo.height){
res = `姓名：${studentInfo.name},年龄：${studentInfo.age},成绩：${studentInfo.score},身高：${studentInfo.height}`
}else{
res = `姓名：${studentInfo.name},年龄：${studentInfo.age},成绩：${studentInfo.score}`
}
return res
}
let studentInfo = {
name:'小鲁班',
age:1,
score:100,
// height:178
}
console.log(Student(studentInfo))
- 接口定义后，允许传入任意值
// 定义接口
interface Info{
name:string;
age: number;
score: number;
height?:number //?意思是非必选的
[propname:string]:any //后面定义传入参数的时候，传入任意值
}
- 接口定义传入函数
接口定义了函数，那么传值得时候，就必须要有这个函数，不然会报错提示
// 定义接口
interface Info{
name:string;
age: number;
score: number;
height?:number //?意思是非必选的
[propname:string]:any //后面定义传入参数的时候，传入任意值
sayHello():string //接口定义传入函数
}
// 传值
let studentInfo = {
name:'小鲁班',
age:1,
score:100,
height:178,
sayHello(){
return 'hello' //上面接口定义了，这里就必须要有函数并且根据接口的定义，返回值必须是string类型
}
}
- 接口的继承
还是接着上面的接口和方法，当设置了Boy继承Info接口后，在Boy中新增加了一个返回值是string的sport方法
// 接口继承
interface Boy extends Info{
sport():string
}
这个时候将Student方法里面的参数换成用Boy接口，那么就会报错，因为在传参的时候，没有加入sport方法，正确方式如下：
// 定义接口
interface Info{
name:string;
age: number;
score: number;
height?:number //?意思是非必选的
[propname:string]:any //后面定义传入参数的时候，传入任意值
sayHello():string //接口定义传入函数
}
let Student = (studentInfo:Boy)=>{
let res:any
if(studentInfo.height){
res = `姓名：${studentInfo.name},年龄：${studentInfo.age},成绩：${studentInfo.score},身高：${studentInfo.height}`
}else{
res = `姓名：${studentInfo.name},年龄：${studentInfo.age},成绩：${studentInfo.score}`
}
return res
}
let studentInfo = {
name:'小鲁班',
age:1,
score:100,
height:178,
sayHello(){
return 'hello'
},
sport(){
return "我喜欢运动！"
}
}
// 接口继承
interface Boy extends Info{
sport():string
}
console.log(Student(studentInfo))
五、类
- 类的基本使用
class Person{
name:string;
constructor(val:string){
this.name = val
}
getName(){
return '我的名字叫：'+ this.name
}
}
let P = new Person("百里");
console.log(P.getName()) //我的名字叫：百里
- 类的继承
在下面的代码中，我们创建一个Student类，继承自Person类，但在自己的类中新加一个getAge方法，然后创建Student实例，调用两个方法：
class Person{
name:string;
constructor(val:string){
this.name = val
}
getName(){
return '我的名字叫：'+ this.name
}
}
class Student extends Person {
getAge(){
return '继承的子类中内容'
}
}
let S = new Student("百里");
console.log(S.getName()) // 我的名字叫：百里
console.log(S.getAge()) // 继承的子类中内容
- 类的重写
在继承的子类中对基类方法的重写，用同样的方法名
class Person{
name:string;
constructor(val:string){
this.name = val
}
getName(){
return '我的名字叫：'+ this.name
}
}
class Student extends Person {
getName(){
return '我是子类重写的方法'
}
}
let P = new Person("百里");
console.log(P.getName())
let S = new Student("百里")
console.log(S.getName())
- super关键字的使用
在继承的子类中，使用父类的方法，并在父类方法后面进行修改，这里可以用super来调用，然后进行操作
class Person{
name:string;
constructor(val:string){
this.name = val
}
getName(){
return '我的名字叫：'+ this.name
}
}
class Student extends Person {
NewgetName(){
return super.getName() + '--我是子类中加入的！！！'
}
}
let S = new Student("百里")
console.log(S.NewgetName()) //我的名字叫：百里--我是子类中加入的！！！
- 公共，私有与受保护的修饰符
先创建一个简单的类
// 类的公有、私有等属性
class Person {
name: string | undefined;
}
const P = new Person()
P.name = '小鲁班'
console.log(P.name) // 小鲁班
1）public公有属性
在TypeScript里，成员都默认为public，上面的例子中，没有对 name的访问属性进行定义，默认是public，所有在类的外面P.nam = “小鲁班”就可以对内容进行修改。
class Person {
public name: string | undefined;
public Say() {
return "我的名字叫：" + this.name
}
}
const P = new Person()
P.name = '小鲁班'
console.log(P.name) //小鲁班
console.log(P.Say())//我的名字叫：小鲁班
2）private私有属性
当类中设置了private私有访问属性，那么在类的外部是无法访问
class Person {
private name: string | undefined;
private Say() {
return "我的名字叫：" + this.name
}
}
const P = new Person()
P.name = '小鲁班' // 属性“name”为私有属性，只能在类“Person”中访问。
console.log(P.name) //属性“name”为私有属性，只能在类“Person”中访问。
console.log(P.Say())//属性“Say”为私有属性，只能在类“Person”中访问。
3）protected受保护属性
protected修饰符与 private修饰符的行为很相似，但有一点不同， protected成员在继承的子类中仍然可以访问。
class Person {
protected name: string | undefined;
constructor(val: string) {
this.name = val
console.log("父类中的值"+this.name)
}
}
class Student extends Person {
constructor(name:string) {
super(name);
}
}
let P = new Person("百里")
P.name = "修改" //报错 属性“name”受保护，只能在类“Person”及其子类中访问。
let S = new Student("张三")
---------------------------------------------------------------分隔符---------------------------------------------------------------------
网友评论