TypeScript的30个小问答(上)

简介: TypeScript的30个小问答(上)

1、 TypeScript 的主要特点是什么?


  • 跨平台:TypeScript 编译器可以安装在任何操作系统上,包括 Windows、macOS 和 Linux。
  • ES6 特性:TypeScript 包含计划中的 ECMAScript 2015 (ES6) 的大部分特性,例如箭头函数。
  • 面向对象的语言:TypeScript 提供所有标准的 OOP 功能,如类、接口和模块。
  • 静态类型检查:TypeScript 使用静态类型并帮助在编译时进行类型检查。因此,你可以在编写代码时发现编译时错误,而无需运行脚本。
  • 可选的静态类型:如果你习惯了 JavaScript 的动态类型,TypeScript 还允许可选的静态类型。
  • DOM 操作:您可以使用 TypeScript 来操作 DOM 以添加或删除客户端网页元素。


2、使用 TypeScript 有什么好处?


  • TypeScript 更具表现力,这意味着它的语法混乱更少。
  • 由于高级调试器专注于在编译时之前捕获逻辑错误,因此调试很容易。
  • 静态类型使 TypeScript 比 JavaScript 的动态类型更易于阅读和结构化。
  • 由于通用的转译,它可以跨平台使用,在客户端和服务器端项目中。


3、TypeScript 的内置数据类型有哪些?


  • 数字类型:用于表示数字类型的值。TypeScript 中的所有数字都存储为浮点值。


const m:number = value
复制代码


  • 布尔类型:一个逻辑二进制开关,包含true或false


const m:bool = Boolean value
复制代码


  • Null 类型:Null 表示值未定义的变量。


const m:string = ""
复制代码


  • 未定义类型:一个未定义的字面量,它是所有变量的起点。


const m:string = null
复制代码


  • void 类型:分配给没有返回值的方法的类型。


const m:void = undefined
复制代码



4、TypeScript 目前的稳定版本是什么?


当前的稳定版本是 4.2.3。


5、TypeScript 中的接口是什么?


接口为使用该接口的对象定义契约或结构。接口是用关键字定义的interface,它可以包含使用函数或箭头函数的属性和方法声明。


interface IEmployee {
    empCode: number
    empName: string
    getSalary: (number) => number // arrow function
    getManagerName(number): string
}
复制代码


6、TypeScript 中的模块是什么?


TypeScript 中的模块是相关变量、函数、类和接口的集合。你可以将模块视为包含执行任务所需的一切的容器。可以导入模块以轻松地在项目之间共享代码。


module fn{
    class onFn{
        export sum(x, y){
            return x + y
        }
    }
}
复制代码


7、后端如何使用TypeScript?


你可以将 Node.js 与 TypeScript 结合使用,将 TypeScript 的优势带入后端工作。只需输入以下命令,即可将 TypeScript 编译器安装到你的 Node.js 中:


npm i -g typescript
// 或者
yarn add typescript -g
复制代码


8、TypeScript 中的类型断言是什么?


TypeScript 中的类型断言的工作方式类似于其他语言中的类型转换,但没有 C# 和 Java 等语言中可能的类型检查或数据重组。类型断言对运行时没有影响,仅由编译器使用。类型断言本质上是类型转换的软版本,它建议编译器将变量视为某种类型,但如果它处于不同的形式,则不会强制它进入该模型。


9、如何在 TypeScript 中创建变量?


你可以通过三种方式创建变量:var,let,和const。

  • var是严格范围变量的旧风格。你应该尽可能避免使用,var因为它会在较大的项目中导致问题。


var m:number = 1
复制代码


  • let是在 TypeScript 中声明变量的默认方式。与var相比,let减少了编译时错误的数量并提高了代码的可读性。


let m:number = 1
复制代码


  • const创建一个其值不能改变的常量变量。它使用相同的范围规则,let并有助于降低整体程序的复杂性。


const m:number = 100
复制代码


10、在TypeScript中如何从子类调用基类构造函数?


你可以使用该super()函数来调用基类的构造函数。


class Animal {
  name: string;
  constructor(name: string) {
    this.name = name
  }
  move(distanceInMeters: number = 0) {
    console.log(`${this.name} moved ${distanceInMeters}m.`)
  }
}
class Snake extends Animal {
  constructor(name: string) {
    super(name)
  }
  move(distanceInMeters = 5) {
    console.log("Slithering...")
    super.move(distanceInMeters)
  }
}
复制代码


11、解释如何使用 TypeScript mixin。


Mixin 本质上是在相反方向上工作的继承。Mixins 允许你通过组合以前类中更简单的部分类设置来构建新类。相反,类A继承类B来获得它的功能,类B从类A需要返回一个新类的附加功能。


12、TypeScript 中如何检查 null 和 undefined?


你可以使用 juggle-check,它检查 null 和 undefined,或者使用 strict-check,它返回true设置为null的值,并且不会评估true未定义的变量。


//juggle
if (x == null) {
    //
}
// --------------------
var a: number
var b: number = null
function strictCheck(x, name) {
    if (x == null) console.log(name + ' == null')
    if (x === null) console.log(name + ' === null')
    if (typeof x === 'undefined') console.log(name + ' is undefined')
}  
strictCheck(a, 'a')
strictCheck(b, 'b')
复制代码


13、TypeScript 中的 getter/setter 是什么?你如何使用它们?


Getter 和 setter 是特殊类型的方法,可帮助你根据程序的需要委派对私有变量的不同级别的访问。Getters 允许你引用一个值但不能编辑它。Setter 允许你更改变量的值,但不能查看其当前值。这些对于实现封装是必不可少的。例如,新雇主可能能够了解get公司的员工人数,但无权set了解员工人数。


const fullNameMaxLength = 10
class Employee {
  private _fullName: string = ""
  get fullName(): string {
    return this._fullName
  }
  set fullName(newName: string) {
    if (newName && newName.length > fullNameMaxLength) {
      throw new Error("fullName has a max length of " + fullNameMaxLength)
    }
    this._fullName = newName
  }
}
let employee = new Employee()
employee.fullName = "Bob Smith"
if (employee.fullName) {
  console.log(employee.fullName)
}
复制代码


14、 如何允许模块外定义的类可以访问?


你可以使用export关键字打开模块以供在模块外使用。


module Admin {
  // use the export keyword in TypeScript to access the class outside
  export class Employee {
    constructor(name: string, email: string) { }
  }
  let alex = new Employee('alex', 'alex@gmail.com');
}
// The Admin variable will allow you to access the Employee class outside the module with the help of the export keyword in TypeScript
let nick = new Admin.Employee('nick', 'nick@yahoo.com')
复制代码


15、如何使用 Typescript 将字符串转换为数字?


与 JavaScript 类似,你可以使用parseInt或parseFloat函数分别将字符串转换为整数或浮点数。你还可以使用一元运算符+将字符串转换为最合适的数字类型,“3”成为整数,3而“3.14”成为浮点数3.14。


const x = "32"
const y: number = +x
复制代码


相关文章
|
5月前
|
自然语言处理 JavaScript
typescript let
typescript let
|
6月前
|
JavaScript 前端开发 开发者
TypeScript一
JavaScript开发迅速但维护成本高,适合小型项目,因其动态类型导致编辑器提示不全。TypeScript是JS超集,增加了类型系统,提高开发效率和代码质量。安装TypeScript需先安装Node.js,然后通过npm安装tsc。案例演示创建`.ts`文件,转换成`.js`并运行。TypeScript支持多种数据类型,如any、number、string等,并有严格变量声明和函数定义规则,包括函数重载和匿名函数。
|
6月前
|
存储 JavaScript 索引
TypeScript四
## 联合类型 联合类型使用`|`分隔,表示变量可为多种类型: ```c var val: string | number; val = 12; // OK val = "Runoob"; // OK `
|
6月前
|
JavaScript 前端开发
TypeScript二
JavaScript Number对象包含多种方法,如`toExponential()`将数值转化为指数形式,`toFixed()`保留指定位数的小数,`toLocaleString()`按本地格式显示数字,`toPrecision()`格式化数字到指定长度,`toString()`以指定基数表示数字,而`valueOf()`返回原始数值。此外,示例中还展示了Date对象的格式化方法。对于String对象,有`constructor`返回创建对象的函数,`length`获取字符串长度,`prototype`用于扩展对象,以及一系列如`charAt()`、`indexOf()
|
JavaScript
【TypeScript理解】
【TypeScript理解】
|
JavaScript 前端开发 数据库
TypeScript 期中考试现在开始
相信这段时间来,对 TypeScript 感兴趣的小伙伴们已经把这个神器给系统的学习了一遍了吧。如果计划开始学习但是还没有开始,或者没有找到资料的同学,可以看下我在之前文章中 前端进阶指南[1] 找一下 TypeScript 部分的教程,自行学习。
|
JavaScript 前端开发 开发工具
TypeScript初识
TypeScript初识
146 0
typescript91-添加任务基本实现
typescript91-添加任务基本实现
86 0
typescript91-添加任务基本实现