1 TypeScript 环境搭建

1 准备NodeJs环境
2 npm全局安装typeScript
npm i -g typescript
3 编写一个ts文件
4 使用tsc命令编译ts文件为js
E:\File\myNote\TypeScript>tsc hello.ts
5 使用ts-node直接运行ts文件
npm install -g ts-node

2 基本类型

基本写法
  • ts文件语法存在错误也能继续编译
  • ts文件可以编译为任意es版本的js文件,确保代码的兼容性,在任意浏览器都能运行
  • 将js从一个动态语言变成了一个静态语言

写法一:先声明再赋值

let a: number;

a = '123';
var a;
a = '123';

写法二:声明的同时赋值

let a: number = 123;

写法三:声明的同时赋值并省略类型声明

let a = 123;
a = '123';

从写法三来看上面的写法好像都挺多余的,但是是为了应对js存在的问题:js中函数不会去考虑参数的类型和个数

function sum(a: number, b: number) {
return a + b;
} console.log(sum(1, 2));
console.log(sum(1, '2'));;

第六行会报错了,但是仍然能够编译

类型声明
类型 描述
number 任意数字
string 任意字符串
boolean 布尔值
字面量 限制变量的值就是该字面量的值
any 任意类型
unkown 类型安全的any
void 空值或undefined
never 不能是任何值
object 任意的js对象
array 任意的js数组
tuple 元素,TS新增数据类型,固定长度数组
enum 枚举,TS中新增类型
| 联合类型

使用|来连接多个类型

let a : "123" | "456"
a = "789" let b : number | boolean
b = "213"

均会报错

any:任意数据类型,但不建议使用

相当于对该变量关闭了TS的类型检测

let a : any;
a = 1;
a = '2';

上面的代码不会报错

在不进行类型声明的时候,变量会隐式声明为any类型

let a;
a = 1;
a = '2';

上面的代码也不会报错

unknown:未知数据类型
  • unknown类型的变量在赋值的时候和any相同
  • any能够赋值给任意类型的变量,而unknown不能
let a;
a = 1;
a = '2'; let b : unknown;
b = 1;
b = '2'; let c : string;
c = a;
c = b;
类型断言 as 、:告诉解析器实际类型

上面的代码添加断言后就能通过编译了:

let a;
a = 1;
a = '2'; let b : unknown;
b = 1;
b = '2'; let c : string;
c = a; c = b as string;
c = <string> b;
let fn = function (num: number | string): void {
console.log((num as string).length)
} fn('12345')
fn(12345)

这里需要添加断言才不会报错,但是实际运行的时候仍然会报错(下面的fn传递的实际时number),所以类型断言仅仅只是欺骗了编译器,需要慎重使用

类型断言的使用技巧:向window上添加属性

(<any>window).abc = 123

不添加断言是不允许这样做的,因为window上并没有abc这个属性

函数的类型声明
function fun() : void {

}
&交叉类型

同时拥有交叉的类型的所有属性

interface People {
name: string,
age: number
} interface Man {
sex: number
} const liu = function (man: People & Man) {
console.log(man)
} liu({
name: 'liu',
age: 26,
sex: 1
})

TS(一)环境搭建与基本类型的更多相关文章

  1. ts开发环境搭建

    ts为typescript的缩写,是javascript的超集. npm源改为国内 由于 Node 的官方模块仓库网速太慢,模块仓库需要切换到阿里的源. npm config set registry ...

  2. Ts环境搭建

    一.ts环境搭建 安装node.js,用dos命令npm全局安装typescripe包环境 进入vscode官网下载zip文件解压后使用code.exe

  3. linux内核学习之一:环境搭建--安装Debian7.3

    本系列文章假设读者已对linux有一定的了解,其实学习linux内核不需要有很深的关于linux的知识,只需要了解以下内容:linux基础知识及基本shell命令:现代操作系统的基本概念:C语言和gc ...

  4. TypeScript环境搭建

    环境搭建 本篇将简单介绍一下TypeScript,并记录开发环境的搭建.使用Visual Studio Code进行一个简单的Demo开发过程. 第一部分.简介 TypeScript是一种由微软开发的 ...

  5. ReactNative之从HelloWorld中看环境搭建、组件封装、Props及State

    开篇呢,先给大家问个好,今天是中秋节,祝大家中秋节快乐!!虽然是中秋节,但是木有回家还是总结一下知识点写写博客吧,想着昨天总结一下的,但是昨天和几个同学小聚了一下,酒逢知己总是千杯少呢,喝的微醺不适合 ...

  6. wnmp(windows+nginx+mysql+php)环境搭建和配置

    要求 必备知识 熟悉基本编程环境搭建. 运行环境 windows 7(64位); nginx-1.4.7;MySQL Server 5.5php-5.4.39-nts 下载地址 环境下载 Nginx是 ...

  7. Sklearn环境搭建与常用包

    开发环境搭建 直接安装Anaconda IPython IPython是公认的现代科学计算中最重要的Python工具之一.它是一个加强版的Python交互命令行工具,有以下几个明显的特点: 1. 可以 ...

  8. TypeScript完全解读(26课时)_1.TypeScript完全解读-开发环境搭建

    1.TypeScript完全解读-开发环境搭建 初始化项目 手动创建文件夹 D:\MyDemos\tsDemo\client-demo 用VSCode打开 npm init:初始化项目 然后我们的项目 ...

  9. Java Web项目实战第1篇之环境搭建

    写在前面的话 从今天开始一个Java Web实战项目,参考自 http://blog.csdn.net/eson_15/article/details/51277324 这个博客(非常感谢博主的分享精 ...

  10. 写给前端同学的C++入门教程(一):概述和环境搭建

    说明:本人是前端er,因为最近对 UE4(一个游戏开发引擎)产生了兴趣,而这个引擎源开发游戏时需要用到 C++ ,所以就开始入坑 C++ 了.现将自己学习 C++ 的笔记整理并分享出来,以便一些想入门 ...

随机推荐

  1. java注解-最通俗易懂的讲解

    来源:秒懂,Java 注解 (Annotation)你可以这样学 Annotation 中文译过来就是注解.标释的意思,在 Java 中注解是一个很重要的知识点,但经常还是有点让新手不容易理解. 我个 ...

  2. 使用Jquery的.css('border')在火狐不兼容

    改成如下就可以兼容火狐.IE.谷歌(border-left-color.border-left-width等)

  3. Cookie会话跟踪技术

    cookie是什么 cookie 也叫 HTTPCookie,是客户端与服务器端进行会话(session)使用的一个能够在浏览器本地化存储的技术. cookie就是为了存储 sessionID而诞生. ...

  4. jmeter 正则表达式提取关联参数

    自己也是初学,今天就正则表达式提取关联参数举几个例子. 理论: 1.提取单个字符串: 假如想匹配Web页面的如下部分:name = "file" value = "rea ...

  5. Crypto入门 (七) Railfence (栏栅密码,正常型和W型)

    前言: Crypto中分三类,分别是编码.古典密码.现代密码,栏栅密码属于古典密码中得特殊移位密码,密钥只有 一个k,表示栏栅得长度.所谓栏栅密码就是将要加密得明文分成k个一组,然后取每组得第一个字符 ...

  6. ASP.NET的MVC模式中分布页和布局页的使用

    大概描述一下,分布页是布局页的一部分,分布页就相当于小图标,布局页就相当于PPT模板,PPT模板可以加入一些小图标(分布页),你只需要改改内容就好,视图创建的时候要选择包含布局页的 首先,去Contr ...

  7. 10.Java中Map的entrySet() 详解以及用法

    一.Map.entry是什么? Map是java中的接口,Map.Entry是Map的一个内部接口. 此接口为泛型,定义为Entry<K,V>.它表示Map中的一个实体(一个key-val ...

  8. 2019.11.14 typeScript环境搭建

    当前环境为windows系统,在VSCode下搭建typeScript环境.在mac系统下同window系统一样,只是安装好ts环境后可能会报tsc命令不能使用的错误,这个时候需要找到tsc命令所在的 ...

  9. 在POD的ENV中添加POD的信息

    主要用到的参数: - name POD_NAME volumeFrom: fieldRef: fieldPath:   metadata.name - name: POD_IP volumeFrom: ...

  10. 自动化兼容性测试工具——WeTest

    这个作业属于哪个课程 2021春软件工程实践|W班(福州大学) 这个作业要求在哪里 软件工程实践总结&个人技术博客 这个作业的目标 分享自动化兼容性测试工具的使用 其他参考文献 ... 目录 ...