TypeScript
https://2023.stateofjs.com/en-US/
npx ts-node src/index.ts
In quotes...
- "JavaScript that scales."
- "TypeScript is a typed superset of JavaScript that compiles to plain JavaScript."
- "Any browser. Any host. Any OS. Open source."
- "When to use 'any' versus rolling out a type"
Core Types
Note you can of course create your own too.
- number (signed or unsigned, floats, etc)
- string
- boolean
- tuple
- enum
- any - most permission type in TS (basically it gives up any form of checking)
- unknown - better choice over
any
if you can't tell exactly what type you'll store in the variable but you will know eventually - void - TS only (e.g. not available in JS) that is used when a function doesn't return anything
- never - used when something will
never
be returned (e.g. a function never returns a value) - custom types
Throwing errors
With throw
...e.g.
throw { message: message, errorCode: code }
Interfaces
TBD
Resources
- official docs
- bootstrapping
- eslint-config-airbnb-typescript - Airbnb's ESLint config with TypeScript support
- Style Guide and Coding Conventions
- DefinitelyTyped - repository for high quality TypeScript type definitions
- LearnXinYminutes
Utilities
- tsx - tsx is a CLI command (alternative to node) for seamlessly running TypeScript & ESM
- tsdx - Zero-config CLI for TypeScript package development
- nx - next generation build system with first class monorepo support and powerful integrations.
- tsd - write tests for your type definitions
- dts-bundle-generator - generate a dts bundle from your ts code
- Playground
- ttypescript
- ts-error-translator
- ts-interface-checker
- tsyringe - lightweight dependency injection container
Boilerplates
Typing
Pick & Omit
interface Person {
name: string;
age: number;
address: string;
email: string;
}
// Using Pick to select specific properties
type PersonBasicInfo = Pick<Person, 'name' | 'age'>;
// This creates a new type PersonBasicInfo with only 'name' and 'age' properties from the Person interface.
const basicInfo: PersonBasicInfo = {
name: 'John',
age: 30,
};
// Using Omit to exclude specific properties
type PersonWithoutEmail = Omit<Person, 'email'>;
// This creates a new type PersonWithoutEmail by excluding the 'email' property from the Person interface.
const withoutEmail: PersonWithoutEmail = {
name: 'Alice',
age: 25,
address: '123 Main St',
};
Generics
"In simple terms, generics allow you to write a function or a component that can work with any data type, not just one. An example might where you specify different data types for transport, chain, and account, which can be customized when the function is called."
Aha...
Ah so it's essentially two different sets of parameters...the generic ones (first) followed by the conventional ones?
Yes, exactly! In TypeScript, when you see a function defined with generics, it essentially has two sets of parameters:
-
Generic Parameters: These are specified between angle brackets (
< >
) right after the function name. They define placeholders for types that will be used within the function. These types can then be referenced throughout the function's definition to ensure type safety and flexibility. The generics allow the function to be used with a wide variety of types without being rewritten or overloaded for each type. In thesmartAccount
example, the generic parameters aretransport
,chain
, andaccount
, which allow the function to be customized for different types of transports, blockchain chains, and accounts. -
Conventional Parameters: These are the parameters you're more familiar with, defined within parentheses (
( )
). They represent the actual data or options that you pass to the function when you call it. In thesmartAccount
example, this is the object with properties likesmartAccountClient
,id
,name
, andtype
. These parameters are what the function uses to perform its operations, and they can have default values or be optional.
This structure of having both generic and conventional parameters allows TypeScript functions to be both flexible and type-safe. You can define a function that can work with a variety of types (thanks to generics) while still performing specific operations based on the provided arguments (the conventional parameters).
Arrays
.findLast()
.toSorted()
.toReversed()
.toSpliced()
.with()
.fill()
Examples...
const selectors = new Array(8).fill(randomBytes(4));
const targets = new Array(8).fill(randomAddress())
TSX
"tsx is perhaps unfortunately named though so it may confuse people at first since it has nothing to do with jsx syntax."