TypeScript入门(1) | 青训营笔记

叮咚a
77 阅读5分钟

TypeScript入门(1) | 青训营笔记

这是我参与「第五届青训营 」伴学笔记创作活动的第 5 天

一、TS和JS的 区别，以及认识TS

ts就到vue3或者是react中去使用吧，在vue2中 使用ts基本上是给自己添加烦恼. typescript 是javascript类型的超集， 可以编译成纯javascript, ，可以跨浏览器，跨平台运行

如果你很在乎开发速度，快速迭代，那么建议你继续用 JavaScript。如果你需要高稳定性，那么建议你使用 TypeScript。

image.png

image.png

二、基本语法

1.数据类型的定义

image.png TS类型的定义 变量名 ： 数据类型 = 值

//let 变量名:数据类型 = 值
//数据类型定义
let a:number=100;
let b:string="hello";
let c:boolean=true;
let d:undefined=undefined;
let f:null=null;

使用 any 关键字 定义任意类型

image.png

2.对象类型

image.png 在以上图片中 第一个报错是只读属性，不可改变 第二个，任意属性，可添加（算是对应关系吧） 第三个报错是因为name 是必填项， habby无所谓了就，他是一个可选属性，写不写都行。 在 TypeScript 中，我们使用接口（Interfaces）来定义对象的类型。
接口是对象的状态(属性)和行为(方法)的抽象(描述)

1.可选属性

定义可选属性 通过 ? : 如果有一些属性是可有可无，可以定义为可选属性，通过 在属性名后边添加 ? 实现

2. 定义任意属性(也是可有可无)

[propName:数据类型] :any 使用[propName: string]定义了任意属性取 string 类型的值。

3. 定义只读属性

通过 readonly 关键字
只读： 只读的约束存在于第一次给对象赋值的时候，而不是第一次给只读属性赋值的时候：

//定义了一个接口person，接口首字母大写
interface Person{
    name:string;
    age:number;
    sex?:string  //可选属性
    [propName:string]:any //可为任意数据类型
    readonly id:number//只读不可改

}
//定义一个变量，其数据类型为person
let Tom:Person = {
    name:"Tom",     //用逗号隔开
    age:25,
    sex:"女",
    gender:"meinv", 
    id:123456,   

}

3.函数类型

image.png

image.png 注意:箭头函数右边的number是输出类型,
右边括号外的number是返回值类型

箭头如果实在函数表达式中(就是声明函数时使用的),意味着是指定函数返回值的类型,除此以外代表都是箭头函数 image.png

//函数声明
let fun2:(x:number,y:number)=>number=function(a:number,b:number):number{
    return a+b;

}
console.log(fun2(1,12));

//也可弄个接口
interface Imult{
    (x:number,y:number):number
}
let fun3:Imult=function(a:number,b:number){
    return a+b
}
console.log(fun3(1,1));

思考：函数声明式和函数表达式的区别

javascript中声明函数常用的方法有两种：函数声明式和函数表达式.

一、定义

下面分别用两种方法定义函数：

复制代码

//函数声明式
function greeting(){
      console.log("hello world");  
}

//函数表达式
var greeting = function(){
    console.log("hello world"); 
}

复制代码

二、区别:

    1).以函数声明的方法定义的函数,函数名是必须的,而函数表达式的函数名是可选的。

如果函数表达式声明的函数有函数名,那么这个函数名就相当于这个函数的一个局部变量,只能在函数内部调用,举个栗子：

复制代码

var f = function fact(x) { 
    if (x <= 1) 
         return 1;
     else 
         return x*fact(x-1);
     };
 alert(fact());   // Uncaught ReferenceError: fact is not defined

复制代码

    

    2).以函数声明的方法定义的函数,函数可以在函数声明之前调用,而函数表达式的函数只能在声明之后调用（函数声明整体会被提升到当前作用域的顶部，函数表达式也提升到顶部但是只有其变量名提升，变量提升详解：www.cnblogs.com/vickylinj/p…）  ：

函数表达式与其他表达式一样，在使用前必须先赋值。以下代码会导致错误。

sayHi(); //错误：函数还不存在
var sayHi = function(){
alert("Hi!");
};

 

    3).以函数声明的方法定义的函数并不是真正的声明,它们仅仅可以出现在全局中,或者嵌套在其他的函数中,但是它们不能出现在循环,条件或者try/catch/finally中,而函数表达式可以在任何地方声明。换句话说，函数声明不是一个完整的语句，所以不能出现在if-else,for循环，finally，try catch语句以及with语句中。

为什么if else 语句里不能用函数声明定义函数，而可以用函数表达式定义函数：

复制代码

//不要这样做！
if(condition){
function sayHi(){
alert("Hi!");
}
} else {
function sayHi(){
alert("Yo!");
}
}

复制代码

表面上看，以上代码表示在 condition 为 true 时，使用一个 sayHi()的定义；否则，就使用另一个定义。实际上，这在 ECMAScript 中属于无效语法， JavaScript 引擎会尝试修正错误，将其转换为合 理的状态。 但问题是浏览器尝试修正错误的做法并不一致。大多数浏览器会返回第二个声明，忽略****condition； Firefox 会在 condition 为 true 时返回第一个声明。因此这种使用方式很危险，不应该
出现在你的代码中。不过，如果是使用函数表达式，那就没有什么问题了。

为什么属于无效的语法呢？这要从词法作用来说，在《JavaScript语言精髓与编程实践》第3章3.2基本语法的结构化含义 ，其中3.2.2.2语法作用域的相关性这一小节回答了以上的疑问，以下属于摘抄部分：

 

上面的代码function的语法作用比表达式的语法作用域高，所以上面if。。。else。。。语句不能包含函数的词法作用域，JavaScript会将其理解为“平行”的关系，即如下所示：

本例中的代码也会理解为：

复制代码

if(condition){}

else {}


function sayHi(){
alert("Hi!");
}

function sayHi(){
alert("Yo!");

）

复制代码

相当于第二个sayHi（）函数覆盖了第一个，所以会大多数浏览器会返回第二个声明，忽略****condition。

复制代码

//可以这样做
var sayHi;
if(condition){
sayHi = function(){
alert("Hi!");
};
} else {
sayHi = function(){
alert("Yo!");
};
}

复制代码

这个例子不会有什么意外，不同的函数会根据 condition 被赋值给 sayHi。

avatar
文章
阅读
粉丝