Announcing native TypeScript support for Netlify Functions

Features Updates
1

Hi all! :wave:

I wanted to share with you an exciting addition to our Functions offering: native support for TypeScript functions! :tada:

Up until now, using TypeScript with Netlify Functions involved an additional build step to compile the function code down to JavaScript. As of today, that’s no longer the case. You can simply add a .ts file to your functions directory and our build system handles the rest.

We’ve published a blog post with the announcement, as well as updated documentation pages containing all the information you need to get started.

We’re very much looking forward to hearing your feedback and seeing what you build!

1 Like
2

That’s awesome! Thanks team! Out of curiosity, is the backing Github repository meant to be public? Just wanted to check out the type definitions for the event and context objects since I know lots of folks ask for what the shapes of those objects are in various circumstances!

:netliheart:

–
Jon

4

hey @jonsully - we’re looking into it. more details soon!

5

Thanks for asking about this!

The repo is now available publicly, and we’ll soon be adding a link to it from our docs.

Here’s a direct link for now: GitHub - netlify/functions: JavaScript and TypeScript utilities for Netlify Functions.

2 Likes
6

Ahh fantastic :sunglasses: You guys rock! I think a lot of folks are going to appreciate the type definitions for event

and context

!! :netliheart:

–
Jon

1 Like
7

Hi @eduardoboucas,
While everything seems to work seamlessly on production, TS functions are having issues working on netlify-dev, calling function url shows :frowning:

SyntaxError: Cannot use import statement outside a module
  ort { Handler } from '@netlify/functions';
  ^^^
  
  taxError: Cannot use import statement outside a module
  Object.compileFunction (node:vm:355:18)
  wrapSafe (node:internal/modules/cjs/loader:1022:15)
  Module._compile (node:internal/modules/cjs/loader:1056:27)
  Object.Module._extensions..js (node:internal/modules/cjs/loader:1121:10)
  Module.load (node:internal/modules/cjs/loader:972:32)
  Function.Module._load (node:internal/modules/cjs/loader:813:14)
  Module.require (node:internal/modules/cjs/loader:996:19)
  require (node:internal/modules/cjs/helpers:92:18)
  Object._executeSync (******/node_modules/lambda-local/build/lambdalocal.js:277:26)
  Object.execute (******/node_modules/lambda-local/build/lambdalocal.js:83:22)

My tsconfig.json

{
  "compilerOptions": {
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": false,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "isolatedModules": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "noEmit": true,
    "target": "esnext",
    "module": "commonjs",
    "jsx": "react-jsx"
  }
}
8

Hi @sidati! Sorry to hear that.

Can you confirm which version of the Netlify CLI you’re using? You can check this by running netlify --version.

1 Like
9

Hi @eduardoboucas, this is my netlify-cli version
netlify-cli/3.21.10 darwin-x64 node-v15.14.0

10

Hi @eduardoboucas, Any news?

11

Can you please try upgrading to version 3.22.0 and seeing if the issue still persists? If so, could you provide a repository with a reproduction case? I’m not able to reproduce this currently.

EDIT: Updated answer to reflect the newly-released version 3.22.0 of the CLI.

2 Likes
12

It seems removing /node_modules + package-lock.json and npm install fix this issue :muscle:
Thanks for the help :slightly_smiling_face:

1 Like
13

Thanks for letting us know, @sidati! :netliconfetti: